<!DOCTYPE html>
<html lang="zh">

	<head>
		<meta charset="UTF-8">
		<title>page test</title>
		<style type="text/css">
			* {
				margin: 0;
				padding: 0;
			}

			.file {
				vertical-align: top;
				position: relative;
				display: inline-block;
				background: #D0EEFF;
				border: 1px solid #99D3F5;
				border-radius: 4px;
				padding: 4px 12px;
				overflow: hidden;
				color: #1E88C7;
				text-decoration: none;
				text-indent: 0;
				line-height: 20px;
			}

			.file input {
				position: absolute;
				font-size: 12px;
				right: 0;
				top: 0;
				opacity: 0;
			}

			.file:hover {
				background: #AADFFD;
				border-color: #78C3F3;
				color: #004974;
				text-decoration: none;
			}

			#dllList {
				margin: auto;
				display: inline-block;
				border-collapse: collapse;
			}

			#dllList th,
			td {
				width: 100px;
				border: 1px solid #98bf21;
				font-size: 12px;
				text-align: right;
				padding: 3px 7px 2px 7px;
			}

			#dllList th {
				font-size: 12px;
				text-align: left;
				padding-top: 5px;
				padding-bottom: 4px;
				background-color: #A7C942;
				color: #ffffff;
			}

			#dllList tr:nth-child(even) {
				color: #000000;
				background-color: #EAF2D3;
			}
		</style>

		<script type="text/javascript">
			var allFiles;

			function fileChange(that) {

				var files = that.files;

				allFiles = files; // 赋值

				var filesJson = '[';
				for (var i = 0; i < files.length; i++) {
					let name = files[i].name;
					let size = Math.round(files[i].size / 1024) + "K";
					let path = window.URL.createObjectURL(files[i]);
					if (/\.pdf$/ig.test(name)) { //这里按业务要求筛选所有dll文件
						// filesJson += '{"name":"' + name + '","size":"' + size + '"},';
						filesJson += '{"name":"' + name + '","size":"' + size + '","path":"' + path + '"},';
					}
				}
				filesJson = filesJson.slice(0, -1) + "]";

				console.log("json：", ":" + filesJson)

				createTable(filesJson);

				// var link = window.URL.createObjectURL(files[0]);
				// imf.src = link;

			}

			function createTable(jsonStr) {
				var obj = JSON.parse(jsonStr);
				var tableObject = document.getElementById('dllList');
				for (var i in obj) {
					let TableRow = tableObject.insertRow();

					let fileName = TableRow.insertCell(0);
					fileName.innerHTML = obj[i].name;

					let fileSize = TableRow.insertCell(1);
					fileSize.innerHTML = obj[i].size;

					let filePath = TableRow.insertCell(2);

					var m = parseInt(i);
					filePath.innerHTML = "<button onclick='doClick(" + i + ")'>查看</button>";
				}
			}

			function doClick(position) {
				var link = window.URL.createObjectURL(allFiles[position]);
				imf.src = link;
			}
		</script>
	</head>

	<body style="width: 100%; height: 100%;">

		<div>
			<a href="javascript:;" class="file">选择文件
				<input type="file" webkitdirectory directory onchange="fileChange(this);" />
			</a>
		</div>
		<div style="position: fixed;  width: 100%; height: 95%;">
			<div style="width: 30%; height: 100%; overflow:scroll; overflow-x:hidden;">
				<table id="dllList">
					<thead>
						<tr>
							<th>文件名</th>
							<th>大小(误差±1K)</th>
							<th>打开</th>
						</tr>
					</thead>
				</table>
			</div>

			<div style="position: absolute; right: 0; top: 0; width: 80%;height: 100%;background: #323639;">
				<iframe id="imf" name="myframe" src="" width="100%" height="100%"></iframe>
			</div>
		</div>

	</body>

</html>
